<template>
  <div class="advanced-generator">
    <el-card class="generator-card">
      <template #header>
        <div class="card-header">
          <h2>高级表情包生成器</h2>
          <p class="subtitle">自定义参数，创建更精确的表情包</p>
        </div>
      </template>

      <el-form :model="formData" label-position="top">
        <el-form-item label="输入文本描述">
          <el-input
            v-model="formData.text"
            type="textarea"
            :rows="3"
            placeholder="请输入要生成的表情包描述，例如：开心的熊猫"
          ></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选择风格">
              <el-select v-model="formData.style" placeholder="请选择风格" style="width: 100%">
                <el-option label="卡通" value="cartoon"></el-option>
                <el-option label="写实" value="realistic"></el-option>
                <el-option label="搞笑" value="funny"></el-option>
                <el-option label="可爱" value="cute"></el-option>
                <el-option label="像素" value="pixel"></el-option>
                <el-option label="水彩" value="watercolor"></el-option>
                <el-option label="素描" value="sketch"></el-option>
                <el-option label="动漫" value="anime"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图像质量">
              <el-slider v-model="formData.quality" :min="50" :max="100" :step="5" show-stops></el-slider>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="风格强度">
              <el-slider v-model="formData.style_strength" :min="0.1" :max="1" :step="0.1" show-stops></el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-switch
                v-model="formData.is_dynamic"
                active-text="动态表情包"
                inactive-text="静态表情包"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="formData.is_dynamic" label="动画类型">
          <el-radio-group v-model="formData.animation_type">
            <el-radio label="bounce">弹跳效果</el-radio>
            <el-radio label="shake">抖动效果</el-radio>
            <el-radio label="rotate">旋转效果</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="generateEmoji" :loading="loading" size="large">
            <el-icon><Magic /></el-icon> 生成表情包
          </el-button>
        </el-form-item>
      </el-form>

      <div v-if="result" class="result-container">
        <el-image :src="getFullImageUrl(result.output_url)" fit="contain" :preview-src-list="[getFullImageUrl(result.output_url)]"></el-image>
        <div class="action-buttons">
          <el-button type="success" @click="downloadImage">
            <el-icon><Download /></el-icon> 下载
          </el-button>
          <el-button type="info" @click="copyLink">
            <el-icon><Link /></el-icon> 复制链接
          </el-button>
          <el-button type="primary" @click="shareEmoji">
            <el-icon><Share /></el-icon> 分享
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Download, Link, Magic, Share } from '@element-plus/icons-vue'
import axios from 'axios'

const API_BASE_URL = 'http://localhost:5000'

const formData = reactive({
  text: '',
  style: 'cartoon',
  is_dynamic: false,
  quality: 75,
  style_strength: 0.7,
  animation_type: 'bounce'
})

const loading = ref(false)
const result = ref(null)

const generateEmoji = async () => {
  if (!formData.text) {
    ElMessage.warning('请输入文本描述')
    return
  }

  loading.value = true
  try {
    const response = await axios.post(`${API_BASE_URL}/api/advanced-generate`, formData)
    result.value = response.data
    ElMessage.success('生成成功')
  } catch (error) {
    ElMessage.error('生成失败：' + (error.response?.data?.message || error.message))
  } finally {
    loading.value = false
  }
}

const getFullImageUrl = (url) => {
  if (!url) return ''
  return url.startsWith('http') ? url : `${API_BASE_URL}${url}`
}

const downloadImage = () => {
  if (result.value?.output_url) {
    const link = document.createElement('a')
    link.href = getFullImageUrl(result.value.output_url)
    link.download = `emoji-${Date.now()}.${result.value.output_url.endsWith('.gif') ? 'gif' : 'png'}`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

const copyLink = () => {
  if (result.value?.output_url) {
    navigator.clipboard.writeText(getFullImageUrl(result.value.output_url))
    ElMessage.success('链接已复制')
  }
}

const shareEmoji = async () => {
  if (!result.value) return
  
  try {
    // 假设我们有history_id，实际中可能需要从结果中获取或通过其他API获取
    const historyId = localStorage.getItem('lastHistoryId') || 'demo_history_id'
    const response = await axios.post(`${API_BASE_URL}/api/share/${historyId}`)
    
    if (response.data.status === 'success') {
      ElMessage.success('分享成功，链接已复制到剪贴板')
      navigator.clipboard.writeText(response.data.share_url)
    }
  } catch (error) {
    ElMessage.error('分享失败：' + (error.response?.data?.message || error.message))
  }
}
</script>

<style scoped>
.advanced-generator {
  max-width: 800px;
  margin: 0 auto;
}

.generator-card {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.generator-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin-bottom: 8px;
  color: var(--primary-color);
}

.subtitle {
  color: var(--info-color);
  margin-top: 0;
}

.result-container {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.el-image {
  max-width: 100%;
  max-height: 400px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
</style>